﻿@page "/select-trees"

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Normal">
    <SelectTree TValue="TreeFoo" Items="Items" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Disable">
    <div class="row">
        <div class="col-12 col-sm-6">
            <SelectTree TValue="TreeFoo" Color="Color.Primary" Items="Items" IsDisabled="true"></SelectTree>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="Binding">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <SelectTree Items="Items" @bind-Value="Model"></SelectTree>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput readonly @bind-Value="Model.Text" PlaceHolder="Please select ..." />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="ClientValidation">
    <ValidateForm Model="BindModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <SelectTree TValue="string" @bind-Value="BindModel.Text" ShowIcon="true" Items="BindItems" />
            </div>
            <div class="col-12 col-sm-6 align-self-end">
                <Button ButtonType="ButtonType.Submit">@Localizer["ButtonText2"]</Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["IsPopoverTitle"]" Introduction="@Localizer["IsPopoverIntro"]" Name="IsPopover">
    <div class="row">
        <div class="col-12 col-sm-6 overflow-hidden">
            <SelectTree Items="Items" IsPopover="true" />
        </div>
    </div>
</DemoBlock>
